<div class="main_footer_tab" id="main_footer_tab">Chronologie</div>
<div id="hiddablearea">
	<div id="mytimeline"></div>
</div>

<script type="text/javascript">

	// DOM element where the Timeline will be attached
	var container = document.getElementById('mytimeline');

	// Create a DataSet with data (enables two way data binding)
	var data = new vis.DataSet([
	  {id: 1, content: 'Saint didier', start: '2013-04-20', end: '2013-04-24'},
	  {id: 2, content: 'item 2', start: '2013-04-14'},
	  {id: 3, content: 'item 3', start: '2013-04-18'},
	  {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},
	  {id: 5, content: 'item 5', start: '2013-04-25'},
	  {id: 6, content: 'item 6', start: '2013-04-27'}
	]);

	// Configuration for the Timeline
	var options = {};

	// Create a Timeline
	var timeline = new vis.Timeline(container, data, options);
	
	$("#hiddablearea").slideUp(500);
	$("#main_footer").height(30);
			
	$(".main_footer_tab").mouseenter(function () { 
		$("#hiddablearea").fadeIn(750);
		$( "#main_footer" ).animate(
		{
			height: 200
		}, 
		{
			duration: 600,
			complete: function() 
			{
				//
			}
		});
	});
	
	$("#main_footer").mouseleave(function () { 
		$("#hiddablearea").fadeOut(750);
		$( "#main_footer" ).animate(
		{
			height: 30
		}, 
		{
			duration: 600,
			complete: function() 
			{
				//
			}
		});
	});
</script>